<template>
    <div class="right-top">
        <div class="sample-info">
            <div class="sample-title"><span class="title-info">留样信息</span></div>
            <div class="sample-content">
                <div ref="main" class="sample"></div>
            </div>
        </div>
    </div>
</template>
<script setup>
import * as echarts from 'echarts';
import { ref, onMounted,onUnmounted} from "vue"

const main = ref()
let myChart=null;
// const datas=ref([
//     { value: 14, name: '留样任务' },
//     { value: 5, name: '任务推送' },
//     { value: 9, name: '今日留样' },
//     { value: 12, name: '待留样' },
//     { value: 3, name: '待报废' },
//     { value: 9, name: '昨日留样' }
// ])

const setecharts = () => {
    myChart = echarts.init(main.value)
    let option = {
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            show: true,
            // feature: {
            //   dataView: { show: true, readOnly: false },
            //   magicType: { show: true, type: ['line', 'bar'] },
            //   restore: { show: true },
            //   saveAsImage: { show: true }
            // }
        },
        //calculable: true,
        xAxis: [
            {
                type: 'category',
                data: ['留样任务', '任务推送', '今日留样', '待留样', '待报废', '昨日留样'],
                axisLabel:{
                    color:'#fff'
                },
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel:{
                    color:'#fff'
                },
                splitLine:{
                    show:true,
                    lineStyle:{
                        color:'#7ca7cb',
                        type:'dashed',
                        width:1
                    }
                }
            }
        ],
        series: [
            {
                name: '留样信息',
                type: 'bar',
                barWidth: '40%',
                data: [
                    {value: 14, label: {show: true, position: 'top', formatter: '{c}'}},
                    {value: 20, label: {show: true, position: 'top', formatter: '{c}'}},
                    {value: 30, label: {show: true, position: 'top', formatter: '{c}'}},
                    {value: 40, label: {show: true, position: 'top', formatter: '{c}'}},
                    {value: 50, label: {show: true, position: 'top', formatter: '{c}'}},
                    {value: 30, label: {show: true, position: 'top', formatter: '{c}'}}
                ],
                itemStyle: {
                    // 设置柱状图的颜色（背景色）
                    color: {
                        type:'linear',
                        x:0,
                        y:0,
                        x2:0,
                        y2:1,
                        colorStops:[{
                            offset:0,color:'#35fff1'
                        },{
                            offset:1,color:'rgba(53, 138, 255, 0.5)'
                        }]
                    }
                },
                label: {
                    show: true, // 显示标签
                    position: 'top', // 标签的位置
                    color: '#fff', // 标签的字体颜色，这里设置为白色，便于看清颜色变化效果
                    backgroundColor:'rgba(23, 81, 161, 0.67)',
                    padding: [3, 5] // 设置内边距，使得文字不完全贴合背景色块边缘，提高可读性。
                }
            }
        ]
    }
    option && myChart.setOption(option);
}

onMounted(() => {
    setecharts()
})

onUnmounted(() => {
    if (myChart) {
        myChart.dispose(); // 组件卸载时销毁实例
    }
});

</script>

<style scoped lang="less">
.right-top{
    height:331px;
    width:548px;
    background: url('../components/img/right-top.png') no-repeat;
    background-size: 100% 100%;
    margin-bottom:20px;
    transform: matrix(1, 0, 0, 1, 1, 0);
    transition-duration: 0ms;
}
.sample-info{
    padding:15px 20px;
    display:flex;
    flex-direction:column;
    height:100%;
    .sample-title{
        color:#fff;
        background: url('../components/img/title-bg.png') no-repeat;
        background-size: 100% 100%;
        height:36px;
        line-height:36px;
        .title-info{
            margin-left:40px;
        }
    }
    .sample-content{
        display: flex;
        height:calc(100% - 30px);
        .sample{
            height:100%;
            width:100%;
        }
    }
    
}
</style>